<template>
	<view class="search">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<u-search placeholder="请输入关键字" v-model="keyword" @search="search_post" @custom="search_post"></u-search>
		<post-list :list="post_list"></post-list>
		<u-loadmore v-if="post_list.length > 0" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
		<u-empty mode="data" v-else></u-empty>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			post_list: [],
			formData: {
				limit: 10,  //每页10条数据
				page: 1,   //第几页
			},
			status: 'loadmore',
			loadingText: '努力加载中',
			loadmoreText: '轻轻上拉',
			nomoreText: '已经到底了哈',
		}
	},
	onReachBottom() {
		this.search_post_more();
		this.status = 'loading';
	},
	methods: {
		search_post() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.formData.keyword = this.keyword
			this.$api.get_posts_list(this.formData).then((res) => {
				this.loading = false;
				this.formData.page++;
				this.status = 'loadmore';
				this.post_list = res.data.list;
			}).catch((err) => {
				this.loading = false;
				console.log('request fail', err);
			})
		},
		search_post_more() {
			this.formData.keyword = this.keyword
			this.$api.get_posts_list(this.formData).then((res) => {
				if (this.formData.page > res.data.pagecount) {
					this.status = 'nomore';
				} else {
					this.formData.page++;
					this.status = 'loadmore';
					this.post_list = this.post_list.concat(res.data.list);
				}
			}).catch((err) => {
				this.loading = false;
				console.log('request fail', err);
			})
		}
	}
}
</script>

<style lang="less">
.search {
	padding: 10px;

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
}
</style>
